<%--
  Date: 2024/10/14 8:58
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
</html>
<html>
<head>
    <title>Title</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
</head>
<body>
<%-- 导航区--%>
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="">徽章<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">小圆点<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;">
            <img src="https://unpkg.com/outeres@0.0.10/demo/avatar/1.jpg" class="layui-nav-img">
        </a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">子级菜单</a></dd>
            <dd><a href="javascript:;">横线隔断</a></dd>
            <hr>
            <dd style="text-align: center;"><a href="">退出</a></dd>
        </dl>
    </li>
</ul>
<%--头部工具栏模板--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="bathDel">批量删除</button>
    </div>
</script>

<%-- 行工具栏模板--%>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    </div>
</script>

<table class="layui-hide" id="ID-table-demo-page"></table>

<script>
<%--    layui 的设计  分模块化  form  table--%>
    layui.use('table', function(){
        // table对象
        let table = layui.table,
            layer = layui.layer;

        // 创建渲染实例
        table.render({
            elem: '#ID-table-demo-page',
            url:'/javaweb/score/layui?method=scorePage', // 此处为静态模拟数据，实际使用时需换成真实接口   异步请求
            toolbar: '#toolbarDemo',  // 表格绑定头部工具栏
            cols: [[
                //  开启列复选框  fixed  固定复选框的位置
                {type: 'checkbox', fixed: 'left'},
                //  field 需要渲染数据的属性名    width 列宽    title  表格字段名  sort 开启列排序
                {field:'id',  title: 'ID'},
                {field:'name',  title: '姓名'},
                {field:'score',  title: '成绩'},
                {field:'course',  title: '科目'},
                //  绑定模板
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]],
            page: true , // 开启分页
            limits:[5,10,15,20,30,40],  //设置每页展示数据的下拉选
            limit: 5   // 默认每页展示的条数
        });

        // 头部工具栏事件     ID-table-demo-page    table  id
        table.on('toolbar(ID-table-demo-page)', function(obj){
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            let othis = lay(this);
            switch(obj.event){
                case 'bathDel':
                    let data = checkStatus.data;  // [{},{}]
                    let ids=  data.map(lineData=>lineData.id)

                    if (ids.length==0){
                        layer.msg('请至少选择一条数据')
                        return
                    }
                    // 发送http请求  删除对应行数据   批量删除  异步请求


                    break;
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,   //  设置弹出层类型  iframe
                        maxmin: true, // 允许全屏最小化
                        shade: 0.5, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        area: ['60%','70%'],
                        content: 'addScore.jsp',
                        end:function () {  // 弹窗关闭时 回调
                            table.reload("ID-table-demo-page")
                        }
                    });
                    break;
            };
        });

        // 触发单元格工具事件
        table.on('tool(ID-table-demo-page)', function(obj){
            let data = obj.data; // 获得当前行数据
            // 添加缓存到会话对象
            sessionStorage.setItem("score",JSON.stringify(data))
            // 获取指定数据
            // sessionStorage.getItem()
            // 删除数据
            // sessionStorage.removeItem()

            if(obj.event === 'edit'){
                //  弹出层
                layer.open({
                    title: '编辑',
                    type: 2,   //  设置弹出层类型  iframe
                    maxmin: true, // 允许全屏最小化
                    shade: 0.5, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    area: ['60%','70%'],
                    content: 'editScore.jsp',
                    end:function (){
                        table.reload("ID-table-demo-page")
                    }
                });
            } else if(obj.event === 'del'){
                console.log("删除数据")
            }
        });
    });


</script>


</body>
</html>
